import React, { Component } from 'react'
import Header from '../../components/Header'
import './login.less'
import {Form,Input} from 'antd-mobile'
import { successAlert } from '../../utils/alert'
import { reqLogin } from '../../http/api';

export default class login extends Component {
  constructor(){
    super();
    this.state={
      user:{
        phone:'',
        password:''
      }
    }
  }
  changeUser(data, key){
    this.setState({
      user:{
        ...this.state.user,
        [key]:data
      }
    });
  }
  async login(){
    try {
      let res = await reqLogin(this.state.user);
      if(res.data.code === 200){
        // 登陆成功
        successAlert(res.data.msg);
        // 将用户信息存储到本地
        localStorage.setItem('userInfo',JSON.stringify(res.data.list));
        
      }
    }catch(err){
      console.log(err);
    }

    console.log(123);
    // 跳转登录
    this.props.history.push('/index/home')
  }
  render() {
    let {phone, password} = this.state.user;
    return (
      <>
        <Header title="登录" register></Header>
        <div className="login">
          <div className="pic">
            <img src="/uploads/pic_logo_orange.jpg" alt="" />
          </div>
          <div className="form">
            <Form layout='horizontal' style={{'--font-size':'1rem'}}>
            <Form.Item label='手机号' name='phone'>
              <Input placeholder='请输入手机号' clearable value={phone} onChange={(e)=>this.changeUser(e,'phone')}/>
            </Form.Item>
            <Form.Item label='密码' name='password'>
              <Input placeholder='请输入密码' clearable type='password' value={password} onChange={(e)=>this.changeUser(e,'password')}/>
            </Form.Item>
            </Form>
            <button onClick={()=>this.login()}>登录</button>
          </div>
        </div>
      </>
    )
  }
}
